<template>
  <div style="background-color: white;border-radius: 10px;display: flex; flex-direction: column;margin-top: -20px" ref="myDiv">
    <el-dialog title="文章详情" :visible.sync="dialogTableVisible">
      <div class="content" v-for="(item,index) in content" :key="index">
        <span v-if="item.type === 'text'">{{item.value}}</span>
        <img v-else :src="item.value" mode="widthFix" style="width: 100%;"/>
        <!-- <rich-text :nodes="detail.content"></rich-text>		 -->

      </div>
    </el-dialog>


<!--    <el-row>-->
<!--      <div style="display: flex;justify-content: flex-start;">-->
<!--        <span style="padding-left: 10px">文章状态</span>-->
<!--        <el-radio v-model="status" :label="-1" style="padding-left: 20px;padding-top: 5px">全部</el-radio>-->
<!--&lt;!&ndash;        <el-radio v-model="status" :label="0" style="padding-top: 5px">草稿</el-radio>&ndash;&gt;-->
<!--        <el-radio v-model="status" :label="1" style="padding-top: 5px">待审核</el-radio>-->
<!--        <el-radio v-model="status" :label="8" style="padding-top: 5px">审核通过</el-radio>-->
<!--        <el-radio v-model="status" :label="2" style="padding-top: 5px">审核失败</el-radio>-->
<!--        <el-radio v-model="status" :label="9" style="padding-top: 5px">已发布</el-radio>-->
<!--      </div>-->
<!--    </el-row>-->
    <br/>
    <el-row style="display: flex;justify-content: flex-start;">
      <span style="width: 80px;padding-left: 10px">标题</span>
      <el-input placeholder="请输入文章标题" size="small" style="width: 250px" v-model="keyword"></el-input>
<!--      <span style="padding-left: 50px;padding-right: 20px">发布日期</span>-->
<!--      <el-date-picker-->
<!--          v-model="date"-->
<!--          type="daterange"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          size="small"-->
<!--          >-->
<!--      </el-date-picker>-->
      <div style="padding-left: 50px">
        <el-button type="primary" size="small" @click="getArticleList(1)">搜索</el-button>
      </div>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="(item,index) in articleList.slice(0,4)" :key="item.id" style="margin-top: 10px">
        <el-card :body-style="{ padding: '0px' }" style="width: 20vw;height: 33vh">
          <div class="container" @click="routeToDetail(item)">
            <img :src="item.images" class="img">
          </div>
          <div style="margin-top: 10px;display: flex;padding-left: 70px">
            <span>{{item.title}}</span>
            <div style="padding-left: 10px;margin-top: -3px">
              <el-tag :type="AuditTagsStatus(item.status)" size="mini">{{AuditStatus(item.status)}}</el-tag>
              <el-button type="text" class="button" style="color: red;padding-left: 10px" @click="deleteOne(item.id)">删除</el-button>
              <br/>
<!--              <span>{{'上传日期: '+formattedDate(item.createdTime)}}</span>-->
            </div>
          </div>

          <div>
            <div class="bottom clearfix">
<!--              -->

            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" v-for="(item,index) in articleList.slice(4,8)" :key="item.id" style="margin-top: 10px">
        <el-card :body-style="{ padding: '0px' }" style="width: 20vw;height: 33vh">
          <div class="container" @click="openDialog(item)">
            <img :src="item.images" class="img">
          </div>
          <div style="margin-top: 10px;display: flex;padding-left: 70px">
            <span>{{item.title}}</span>
            <div style="padding-left: 10px;margin-top: -3px">
              <el-tag :type="AuditTagsStatus(item.status)" size="mini">{{AuditStatus(item.status)}}</el-tag>
              <el-button type="text" class="button" style="color: red;padding-left: 10px" @click="deleteOne(item.id)">删除</el-button>
            </div>
          </div>
          <div >
            <div class="bottom clearfix">
<!--              <span>{{'上传日期: '+formattedDate(item.createdTime)}}</span>-->

            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="display: flex;">
      <div style="display: flex; flex-direction: column; width: 100%;margin: 10px">
        <div class="block">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="8"
              layout="total, prev, pager, next"
              :total="totalCount">
          </el-pagination>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import moment from "moment/moment";

export default {
  name: "MyArticle",
  data(){
    return{
      status:-1,
      date:null,   //是一个数组
      keyword:null,
      articleList:[],
      currentPage:1,
      size:8,
      totalCount:8,
      dialogVisible: false,
      dialogTableVisible:false,
      content:{}
    }
  },
  mounted() {
    this.getArticleList(1)

    // console.log("mAheight ",this.$refs.myDiv.offsetHeight)
    this.$store.commit("transportHeight",this.$refs.myDiv.offsetHeight)
  },
  methods:{
    routeToDetail(item){
      // this.$router.push({
      //   path:'publishArticle',
      //   query:{
      //     data:item
      //   }
      // })
      this.openDialog(item)
    },
    openDialog(item){
      this.dialogTableVisible = true
      console.log(item)
      this.getArticleContent(item)
    },
    getArticleContent(item){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getApArticleContent/'+item.articleId,{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        console.log(res.data.data)
        this.content = JSON.parse(res.data.data)
      });
    },
    AuditTagsStatus(status){
      if(status === 1){
        return 'warning'
      }else if(status === 4){
        return ''
      }else if(status === 2){
        return 'danger'
      }else if(status === 0){
        return 'info'
      }else if(status === 9){
        return '已发布'
      }else if(status === 3){
        return "等待人工审核"
      }
    },
    AuditStatus(status){
      if(status === 1){
        return '待审核'
      }else if(status === 4){
        return '审核通过'
      }else if(status === 2){
        return '审核未通过'
      }else if(status === 0){
        return '草稿'
      }else if(status === 9){
        return '已发布'
      }else if(status === 3){
        return '等待人工审核'
      }
    },
    deleteOne(id) {
      this.axios.get('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/deleteOneMyArticle/' + id, {
        headers: {
          'token': localStorage.getItem('token')
        },
      }).then((res) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/findNewsList', {
          "page": this.currentPage,
          "size": 8
        }, {
          headers: {
            'token': localStorage.getItem('token')
          },
        }).then((res) => {
          console.log(res.data.data);
          this.articleList = res.data.data
          this.totalCount = res.data.total
        });
      });
    },

    formattedDate(date) {
      return moment(date).format('YYYY-MM-DD'); // 使用 Moment.js 格式化日期
    },
    handleCurrentChange(val){
      this.currentPage = val
      console.log("curr ",this.currentPage)
      this.getArticleList(this.currentPage)
    },
    getArticleList(currentPage){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/findNewsList',{
        "page":this.currentPage,
        "size":8,
        "status":this.status,
        "beginPubDate": this.date == null ? this.date : this.date[0],
        "endPubDate":this.date == null ? this.date : this.date[1],
        "channelId":null,
        "keyword":this.keyword
      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        console.log(res.data.data)
        this.articleList = res.data.data
        this.totalCount = res.data.total
      });
    }
  }
}
</script>

<style scoped>
.container {
  width: 25vw;
  height: 25vh;
  overflow: hidden; /* 防止图片溢出容器 */
}

.container img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  display: block;
}
</style>